<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue学习</title>
    <script src="vue.min.js"></script>
    <script src="vue.js"></script>
    <script src="https://static.runoob.com/code/js/vueapp.js"></script><!--用于model-->
    <style>
        .class1{
            background: #444;
            color: red;
        }
    </style>
</head>R
<body>
<div id="vue">{{message}}</div><!--加*号不会随着input的改变而变化-->
<div id="connection">{{message+'www.taobao.com'}}
    <p>{{message.split('').reverse().join('')}}</p>


    <input v-model="message">
    <input v-model.lazy="lazyname">
    <!--下拉框-->
    <select v-model="selectvalue">
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
    </select>
    <p>选择的值{{selectvalue}}</p>
</div>
<div id="bind">
    <span v-bind:title="message1">移入显示时间</span><!--v-html直接输出-->
    <span v-html="message">显示时间</span><!--v-html直接输出-->
</div>
<!--HTML 属性中的值应使用 v-bind 指令。

以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类：-->
<div id="rr">
<!--<label for="al">修改颜色</label><input type="checkbox" v-model="use" id="al">
<span v-bind :class="{'class1':use}">bind class属性</span>-->
    <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
    <br><br>
    <div v-bind:class="{'class1': use}">
        v-bind:class 指令
    </div>
    <div v-bind:style="{color:thiscolor,fontSize:font+'px'}">内联样式方法1</div>
    <div v-bind:style="styleobject">内联样式方法2</div>

</div>
<div id="if">
    <!--条件判断-->
    <span v-if="ok">
        v-if是否显示
    </span>
    <span v-else>显示否</span>
    <span>type的值{{type}}</span>
    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'C'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>
    <div v-show="show">show出来</div>


    <pre><a v-bind:href="url">菜鸟教程</a></pre>
    <input type="text" v-model="user.name">
    <input type="text" v-model="user.sex">
    <button @click.left="click">点击出现user</button><!--点击事件@click.left  @click.right-->

</div>
<div id="reve">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
<!--    过滤函数过滤器函数接受表达式的值作为第一个参数。以下实例对输入的字符串第一个字母转为大写
      在两个大括号中
    {{ message | capitalize }}  在 v-bind 指令中 两种方法
    <div v-bind:id="rawId | formatId"></div>-->

   <p>{{filter| upper}}</p>
<!--    <div v-bind:id="filter | upper"></div>-->
</div>

<script>

    var upp=new Vue({
      el:"#reve",
     data:{
         filter:"daxie",
         message: 'Runoob!'
     },
      filters: {
          upper:function (name) {
              if(name==''){
                  return ""

              }else {
                  name = name.toString();
                  return name.charAt(0).toUpperCase() + name.slice(1);
                  /*slice是截取，slice(1)从1往后截取，slice(3,5),从下标3开始取到5，不过不包括5*/
              }
          }
      },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    });
</script>

<script>
    new Vue({
        el:"#vue",
        data:{
            message:"欢迎学习vue"
        }

    });
    new Vue({
        el:"#connection",
        data:{
            message: "淘宝网",
            selectvalue:"上海",
            lazyname:"要移除后才会改变这个值"
        }
    });
    new Vue({
        el:"#bind",
        data:{
            message:"输出时间"+new Date().toLocaleDateString(),
            message1:"输出时间"+new Date().toLocaleDateString()
        }
    });
    new Vue({
        el: '#rr',
        data:{
            use: true,
            thiscolor:'blue',//内联样式
            font:30,
            styleobject:{/*用对象的形式来写样式*/
             color:"green"   ,
                font: '20px'
            }
        }
    });
    new Vue({
        el:"#if",
        data:{
            ok:false /*true布尔值显示*/,
            url:"http://www.runoob.com",
            msg:"我们转起来",
            type:"B",
            show:true,
            user:{

                name:"小刘",
                sex:"男"
            }
        },

        methods:{
            click(){
                console.log(this.user);
            }
        }

    });





</script>
</body>
</html>